Wizards: Definition and Design Recommendations嚮導

嚮導是一種常見的應用設計模式,用於逐步引導使用者輸入資訊。這種方式適合偶爾執行的複雜流程,透過簡化步驟和減少使用者負擔,讓使用者輕鬆完成任務。

什麼是嚮導

定義:嚮導是一種逐步引導使用者輸入資訊的流程,每一步的內容可能取決於使用者在前一步輸入的資訊。

嚮導通常涉及多個頁面,每個頁面代表一個步驟。這些頁面可能以對話方塊的形式呈現,但並非必須如此。使用者體驗通常呈線性流動:每次只需點選“下一步”繼續,或根據需要點選“返回”或“取消”。

特點:嚮導的邏輯由系統控制,使用者按照固定順序完成任務。這在使用者不瞭解選擇內容或不需要過多自主決策時尤為適用。

案例:Turbotax紙質稅表(左圖)在數字化後成為電子表單。嚮導(右圖)將填寫流程分解為多個步驟,逐步引導使用者完成稅務申報。

動態表單與嚮導

AJAX技術的普及模糊了動態表單和嚮導之間的界限。例如:

Fidelity的頁面詢問使用者是否是現有客戶,根據使用者回答動態展示不同的輸入欄位。這種根據使用者輸入變化的頁面更接近嚮導。

Microsoft的Live.com建立賬戶表單中,雖然提供了動態反饋(例如實時錯誤資訊和欄位說明),但其步驟並未根據使用者輸入改變,因此仍屬於表單而非嚮導。

嚮導顯示更少的資訊

嚮導透過分步驟展示內容,每次只呈現當前需要完成的任務。這種方式有以下好處:

為每個使用者提供最短路徑

嚮導的分支邏輯只顯示與使用者情況相關的步驟。例如:在結賬流程中,沒有信用卡的使用者無需看到相關欄位,只需填寫適用於他們的PayPal資訊即可。

嚮導的侷限性

儘管嚮導優勢明顯,但其在某些情況下並不適用:

Microsoft Word中的參考文獻管理器案例中,使用嚮導輸入每條參考文獻比直接在表格中批次輸入更費力。

Mint.com的信用卡推薦嚮導阻礙了使用者檢視信用評分資訊,而使用者需要記住評分內容以完成推薦流程。

設計可用嚮導的建議

1 嚮導適合新手使用者或不常使用的流程,例如配置或設定任務。如果任務需要頻繁重複,建議提供更快捷的替代方案。

2 展示清晰的流程模型:透過列表或流程圖展示步驟,讓使用者清楚瞭解流程結構和當前進度。例如,Veeam備份軟體的嚮導在側邊列出了所有步驟,並用灰顯和高亮標識未完成和當前步驟。

3 強制遵循步驟順序:確保使用者按順序完成步驟,避免讓使用者自由選擇順序引發混亂。例如,Miniusa.com允許使用者隨意選擇步驟,增加了記憶負擔,使用者難以判斷哪些步驟已完成。

4 按鈕設計清晰:使用描述性標籤,例如明確顯示下一步任務內容,而非僅用“下一步”或“上一步”。Miniusa.com的嚮導中,下一步按鈕標註了具體任務名稱,但沒有明確的返回按鈕。

5 支援中途退出並儲存狀態:提供儲存功能,允許使用者稍後繼續未完成的流程。Mini嚮導提供了“儲存並檢視”按鈕,但其位置偏離使用者視線,容易被忽略。

6 確保步驟資訊獨立完整:每一步驟需包含完成任務所需的全部資訊,不應依賴其他部分的資訊。Expensify.com:當使用者試圖將收據新增到費用中時,嚮導遮蔽了費用詳細資訊。使用者必須記住她正在輸入的是哪項費用以及是為哪個供應商輸入的,以便能夠識別該費用的收據。

7 輔助資訊展示:解釋內容和幫助資訊應顯示在嚮導旁邊,而非覆蓋主要內容。例如,Miniusa.com的選項說明彈窗遮擋了背景內容,難以檢視選項上下文資訊。

8 複用使用者輸入:對於重複使用的嚮導,系統應自動填充之前的輸入值或選擇,簡化後續操作。

嚮導是一種強大的設計模式,能夠簡化複雜流程,特別適用於新手使用者或不常執行的任務。透過分步展示資訊,嚮導降低了使用者的認知負擔和錯誤機率。設計得當的嚮導能夠根據使用者輸入分支,確保使用者只需完成與自己相關的步驟。設計中需避免增加互動負擔,並確保流程資訊清晰、獨立且易於中斷與恢復。